<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
          <h3>房产信息</h3>
      </div>

      <el-descriptions class="margin-top" title="" :column="1" size="" border>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              房产详情
          </template>
          {{ propertyInfo.detail }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              楼栋号
          </template>
          {{ propertyInfo.buildingNo }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              门牌号
          </template>
          {{ propertyInfo.number }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              入住时间
          </template>
          {{ propertyInfo.checkInTime }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              绑定业主
          </template>
          {{ propertyInfo.owner }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              装修状态
          </template>
          {{ propertyInfo.renovationStatus }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              面积
          </template>
          {{ propertyInfo.area }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              房产类型
          </template>
            <el-tag type="" style="background-color: #e54d42; color: white;" v-if="propertyInfo.propertyType == '仓库'">仓库</el-tag>
            <el-tag type="" style="background-color: #f37b1d; color: white;" v-if="propertyInfo.propertyType == '车位'">车位</el-tag>
            <el-tag type="" style="background-color: #fbbd08; color: white;" v-if="propertyInfo.propertyType == '住宅'">住宅</el-tag>
            <el-tag type="" style="background-color: #8dc63f; color: white;" v-if="propertyInfo.propertyType == '商户'">商户</el-tag>
            <el-tag type="" style="background-color: #39b54a; color: white;" v-if="propertyInfo.propertyType == '车库'">车库</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              入住情况
          </template>
          {{ propertyInfo.checkIn==1?'已入住':'未入住' }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              房产照片
          </template>
          <el-image 
              v-show="urls != []"
              style="width: 500px; height: 300px"
              v-for="url in urls"
              :key="url"
              :src="url" 
              :preview-src-list="urls"
              fit="contain">
          </el-image>
          <!-- <el-avatar shape="square" style="width: 100px;height: 100px;" :src=" ownerinfo.face!=null?ownerinfo.face:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' "></el-avatar> -->
          </el-descriptions-item>
      </el-descriptions>
      </el-card>
</template>

<script>
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8099';
// axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');

export default {
name:'propertyInfo',
data(){
  return{
      propertyId:'',
      propertyInfo:{},
      urls:[],
      file: null,
      imageUrl: '',
      uploadUrl:'http://localhost:8099/upload-images',
      fileList:[],
  }
},
mounted() {
  // 获取查询参数
  const ID = this.$route.query.ID;
  this.propertyId = ID
  console.log('propertyId:', ID);
  this.init()
},
activated(){
  const ID = this.$route.query.ID;
  this.propertyId = ID
  console.log('propertyId:', ID);
  this.init()
},
methods:{
  getToken(){
    let admin = localStorage.getItem("admin")
    admin = JSON.parse(admin)
    var data = {'token':admin.token}
    // console.log('token:',admin.token)
    return data
  },
  init(){
      this.$request.get("/property/wx-getpropertyById",{
          params:{
            id:this.propertyId
          }
      }).then(res=>{
          this.propertyInfo = res.data
          let str = res.data.images
          if(str == null || str == ''){
            return;
          }
        //   str = str.replace("[", "").replace("]", "")
          let arr = str;
          this.urls = arr
          console.log(this.urls)
      }).catch(err=>{
          console.error(err)
      })
  },
  addimage(){
    this.$request.post("/property/addimage",this.imageUrl)
    .then(res=>{

    }).catch(err=>{

    })
  }
}
}
</script>

<style>

</style>